<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 国标 gb2312，国际编码标准 utf-8 -->
    <meta charset="UTF-8">
    <!--视口宽度为设备宽度，不能缩放-->
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <!--qq浏览器下强制横盘或者竖屏显示-->
    <meta name="x5-orientation" content="portrait" />
    <!--qq浏览器下是否可以全屏-->
    <meta name="x5-fullscreen" content="true" />
    <!--UC浏览器下强制横盘或者竖屏显示-->
    <meta name="screen-orientation" content="portrait">
    <!--UC浏览器下是否可以全屏-->
    <meta name="full-screen" content="yes">
    <!--是否禁止识别手机和邮箱-->
    <meta name="format-detection" content="telephone=yes, email=no" />
    <title>首页</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div id="main">
        <!-- 快捷键 ctrl+/ -->
        <!-- 头部 header -->
        <div id="header">
            <p id="menu"><img src="./images/menu.png" alt=""></p>
            <h1 id="title">乐动云课堂</h1>
            <p id="search"><img src="./images/search.png" alt=""></p>
        </div>
        <!-- 广告 banner -->
        <div id="ad">
            <ul id="banner">
                <li><a href="###"><img src="./images/ad.png" alt=""></a></li>
            </ul>
        </div>
        <!-- 功能 function -->
        <div id="function">
            <ul>
                <li>
                    <p class="icon"><a href="#"><img src="./images/icon01.png" alt=""></a></p>
                    <p class="title"><a href="#">研发·编程</a></p>
                </li>
                <li>
                    <p class="icon"><a href="#"><img src="./images/icon02.png" alt=""></a></p>
                    <p class="title"><a href="#">研发·编程</a></p>
                </li>
                <li>
                    <p class="icon"><a href="#"><img src="./images/icon03.png" alt=""></a></p>
                    <p class="title"><a href="#">研发·编程</a></p>
                </li>
                <li>
                    <p class="icon"><a href="#"><img src="./images/icon04.png" alt=""></a></p>
                    <p class="title"><a href="#">研发·编程</a></p>
                </li>
            </ul>
        </div>
    </div>


    <!-- div>ul>li*4>a>p -->
</body>
</html>